<template>
    <div class="game">
        <div class="header">
            <i :class="icon"></i>
            <span>{{title}}</span>
            <div class="title">{{title}}</div>
            <em>更多</em>
        </div>
        <div class="body">
            <Vadio v-for="(item, index) in list" :key="index" :list="item"></Vadio>
        </div>
	</div>
</template>

<style lang="scss" scoped>
    .game {
        .header {
            padding: 0 10px;
            display: flex;
            align-items: center;
            font-size: 15px;
            i {
                margin-right: 10px;
                color: #DB9E3F;
            }
            span {
                border-right: 1px solid #ccc;
                padding: 0 5px;
                margin-right: 10px;
            }
            .title {
                font-size: 12px;
                border: 1px solid orange;
                color: orange;
                border-radius: 15px;
                padding: 0 5px;
                
            }
            em {
                font-size: 12px;
                font-style: normal;
                flex: 1;
                text-align: right;
            }
            
        }
        .body {
            display: flex;
            flex-wrap: wrap;
        }
    }


</style>

<script>
import Vadio from '@/components/Vadio'

export default {
    
    components: {Vadio},
    props: [ 'url', 'coll', 'title', 'icon' ],
    data() {
        return {
            data: [],
            list: [],
        }
    },
    created() {
        this.$http.get(this.url, {params: { coll: this.coll }})
            .then(({ data }) => {
                this.list = data
            })
    }

}
</script>